  <!--首页-->
  <template>
    <div class="app">
      <el-container>
        <!--aside-->
        <el-aside class="app-side app-side-left"
                  :class="isCollapse ? 'app-side-collapsed' : 'app-side-expanded'">
          <div class="app-side-logo">
            <img src="@/assets/logo.png"
                 :width="isCollapse ? '60' : '60'"
                 height="60" />
          </div>
          <div>
            <!-- 我是样例菜单 -->
            <el-menu router
                     class="el-menu-vertical-demo"
                     @open="handleOpen"
                     :collapse="isCollapse">
              <router-link to="/map">
                <el-menu-item index="0">
                  <i class="el-icon-menu"></i>
                  <span slot="title">地图</span>
                </el-menu-item>
              </router-link>
              <template v-for="item in items">
                <el-submenu v-if="item.children" :index="item.path" :key="item.name">
                  <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span slot="title">{{ item.name }}</span>
                  </template>
                  <router-link v-for="(citem,cindex) in item.children" :to="citem.path" :key="cindex">
                    <el-menu-item :index="citem.path">
                      <span slot="title">{{ citem.name }}</span>
                    </el-menu-item>
                  </router-link>
                </el-submenu>
              </template>
            </el-menu>
          </div>
        </el-aside>
        <!--header-->
        <el-container>
          <el-header class="app-header">
            <div style="width: 60px; cursor: pointer;"
                 @click.prevent="toggleSideBar">
              <i v-show="!isCollapse" class="el-icon-d-arrow-left"></i>
              <i v-show="isCollapse" class="el-icon-d-arrow-right"></i>
            </div>
            <!-- 顶部导航栏 -->
            <el-menu class="el-menu-demo tab-page"
                     mode="horizontal"
                     @select="handleSelect"
                     active-text-color="#409EFF">
              <el-menu-item index="1">首页</el-menu-item>
            </el-menu>

            <div class="app-header-userinfo">
              <el-dropdown trigger="hover"
                           :hide-on-click="false">
              <span class="el-dropdown-link">
                {{ userName }}
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>我的信息</el-dropdown-item>
                  <el-dropdown-item>设置</el-dropdown-item>
                  <el-dropdown-item divided
                                    @click.native="logout">退出登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-header>
          <!-- main body -->
          <el-main class="app-body">
            <template>
              <router-view/>
            </template>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </template>

<script>
export default {
  name: 'index',
  components: { },
  data () {
    return {
      userName: '',
      userType: '',
      isCollapse: false,
      items: [{
        icon: 'fa-menu',
        name: '景区管理',
        path: 'scenic-spot',
        children: [
          { path: '/scenic-spot-list', name: '景区列表', role: 'USER' },
          { path: '/scenic-spot-add', name: '景区新增', role: 'ADMIN' },
          { path: '/scenic-spot-comments', name: '景区评论', role: 'USER' }
        ]
      },
      {
        icon: 'fa-menu',
        name: '用户管理',
        path: 'user',
        children: [
          { path: '/user-list', name: '用户列表', role: 'ADMIN' },
          { path: '/user-info', name: '用户信息', role: 'USER' }
        ]
      },
      {
        icon: 'fa-menu',
        name: '统计分析',
        path: 'statistics',
        children: [
          { path: '/statistics', name: '统计', role: 'ADMIN' }
        ]
      }
      ]
    }
  },
  created () {
    this.checkPermission()
  },
  methods: {
    checkPermission () {
      var userJSON = sessionStorage.getItem('user')
      var user = JSON.parse(userJSON)
      if (user.userType !== 'ADMIN') {
        for (var i = 0; i < this.items.length; i++) {
          console.log('i' + i)
          var childrens = []
          for (var j = 0; j < this.items[i].children.length; j++) {
            console.log('jjj' + j)
            if (this.items[i].children[j].role !== 'ADMIN') {
              childrens.push(this.items[i].children[j])
            }
          }
          this.items[i].children.length = 0
          this.items[i].children = childrens
        }
      }
      console.log(this.items)
    },
    toggleSideBar () {
      this.isCollapse = !this.isCollapse
    },
    logout: function () {
      this.$confirm('确认退出?', '提示', {})
        .then(() => {
          sessionStorage.removeItem('user')
          this.$router.push('/login')
        })
        .catch(() => {
        })
    },
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    },
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  },
  mounted: function () {
    var userjson = sessionStorage.getItem('user')
    var user = JSON.parse(userjson)
    if (user) {
      this.userName = user.userName
      this.userType = user.userType
    }
  }
}
</script>

<style scoped lang="scss">

</style>
